<template>
  <v-app theme="dark">
    <v-container class="d-flex ga-6 align-start">
      <v-card class="mx-auto" width="300">
        <v-btn color="primary" text="reload" @click="reload" />
        <v-list
          :key="reload1"
          v-model:opened="opened1"
          v-model:selected="selected1"
          :items="items"
          select-strategy="independent"
          auto-reveal-selected
          item-props
        />
      </v-card>
      <v-card class="mx-auto" width="300">
        <v-btn
          color="primary"
          text="apply selection"
          @click="selected2 = [222, 34]"
        />
        <v-treeview
          v-model:opened="opened2"
          v-model:selected="selected2"
          :items="items"
          auto-reveal-delay="400"
          select-strategy="independent"
          auto-reveal-selected
          item-props
          selectable
        />
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const selected1 = [221, 32]
  const reload1 = ref(0)
  function reload () {
    opened1.value = []
    reload1.value++
  }
  const selected2 = ref([])
  const opened1 = ref([])
  const opened2 = ref([])
  const items = [
    { value: 1, title: 'Home', prependIcon: 'mdi-home' },
    {
      value: 2,
      title: 'Admin',
      prependIcon: 'mdi-numeric-1-box-outline',
      children: [
        {
          value: 21,
          title: 'Management',
          prependIcon: 'mdi-account-multiple-outline',
        },
        {
          value: 22,
          title: 'Settings',
          prependIcon: 'mdi-cog-outline',
          children: [
            { value: 221, title: 'General', prependIcon: 'mdi-tools' },
            { value: 222, title: 'Security', prependIcon: 'mdi-security' },
          ],
        },
      ],
    },
    {
      value: 3,
      title: 'Actions',
      prependIcon: 'mdi-numeric-2-box-outline',
      children: [
        { value: 31, title: 'Create', prependIcon: 'mdi-plus-outline' },
        { value: 32, title: 'Read', prependIcon: 'mdi-file-outline' },
        { value: 33, title: 'Update', prependIcon: 'mdi-update' },
        { value: 34, title: 'Delete', prependIcon: 'mdi-delete' },
      ],
    },
  ]
</script>